<template>
  <div>
    <common-head title="所有分类"></common-head>
    <div class="content">
      <div class="cates">
        <div
          v-for="(cate, index) in cates"
          :key="cate.id"
          @click="changeCate(index)"
          :class="['cate', {active: index===num}]"> {{ cate.name }} </div>
      </div>
      <div class="items">
       <div class="main">
         <div class="item" v-for="item in items" :key="item.id">
           {{item.name}}
         </div>
       </div>
      </div>
    </div>
    <my-tabbar/>
  </div>
</template>

<script>
import MyTabbar from '../../components/MyTabbar.vue'
import CommonHead from 'components/CommonHead'
import { fetchCates, fetchItems } from 'api'
export default {
  data () {
    return {
      cates: [],
      items: [],
      num: 0
    }
  },
  created () {
    this.fetchCates()
  },
  methods: {
    changeCate (index) {
      // 切换分类
      this.num = index
      this.fetchItems()
    },
    fetchCates () {
      fetchCates().then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetchItems() // 初始请求items
        }
      })
    },
    fetchItems () {
      this.items = []
      fetchItems({
        categoryId: this.cates[this.num].id
      }).then(res=>{
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    }
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.content{
  position: fixed;
  left:0;
  right:0;
  top:46px;
  bottom: 50px;
  background-color: #f1f1f1;
  display: flex;
  .cates{
    flex:3;
   
    height: 100%;
    .cate{
      line-height: 40px;
      text-align: center;
      font-size:14px;
      color:#666;
       border-right: 1px solid #666;
      border-bottom:1px solid #666;
      background-color: #fff;
      &.active{
        color:#f66;
        background-color: #f1f1f1;
        border-right:none;
      }
    }
  }
  .items{
    flex:10;
    height: 100%;
  }
}
</style>
